<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>reading demo</title>
    <link rel="stylesheet" type="text/css" href="css/lib/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/introjs.css">
    
</head>
<body>
<div id="main" class="wrap_container">
    <!-- tip zone -->
    <div class="top_tip" style="display:none;"></div>
    <!--loading page  -->
    <div class="loader">
        
    </div>
    <!-- login -->
    <section class="login" id="login">
        <div class="login_main">
            <div class="welcome">欢迎</div>
            <!-- <div contenteditable="true" class="username" placeholder="你叫什么名字?"></div> -->
            <input type="text" class="username" placeholder="你叫什么名字?"/><br>
            <img src="img/login_btn.png" alt="" class="login_btn"/>
        </div>
    </section>
    <!-- selectVocabulary -->
    <section class="selectVocabulary" id="selectVocabulary">
        <div class="selectVocabulary_main">
            <div class="selectVocabulary_title">请选择词汇量</div>
            <div class="selectVocabulary_dp">
                <div class="selectVocabulary_dp_ti">
                <div class="selected_vocabulary" data-base="5000">5000</div>
                <div class="select_vocabulary_arrow"></div>
                </div>
                <ul class="selectVocabulary_ul">
                    <li data-vocabulary_size="3000" value="3000">3000</li>
                    <li value="4000">4000</li>
                    <li value="5000">5000</li>
                    <li value="6000">6000</li>
                    <li value="7000">7000</li>
                    <li value="8000">8000</li>
                    <li value="9000">9000</li>
                    <li value="10000">10000</li>
                </ul>
            </div>
            <div class="selectVocabulary_btn_zone"><button class="submit_vocabulary_btn btn btn-primary">确定</button></div>
        </div>
    </section>
    <!-- chooseBook -->
    <section class="chooseBook" id="chooseBook">
        <div class="chooseBook_main">
            <div class="chooseBook_top">
                <div class="chooseBook_top_up">
                    <div class="chooseBook_top_up_left">
                        <span class="chooseBook_logo">Forest</span>
                        <span class="chooseBook_top_btn chooseBook_bookshelf_btn chooseBook_top_btn_hover">我的书架</span>
                        <span class="chooseBook_top_btn chooseBook_vocabularyBook_btn">生词本</span>
                    </div>
                    <!-- <div class="chooseBook_top_btn chooseBook_bookshelf_btn">我的书架</div>
                    <div class="chooseBook_top_btn chooseBook_vocabularyBook_btn">生词本</div> -->
                    <div class="chooseBook_top_up_right">
                        <span class="chooseBook_user_word_size">0</span>
                    </div>
                </div>
            </div>
            <div class="book_stack">
                <div class="add_book book_block">+</div>
                <form method="post" enctype="multipart/form-data" class="upload_book_form">
                    <input id="file" type="file" name="file" class="upload_book_file">
                    <div class="upload_book_frame book_block">
                        <span class="btn btn-success file_up_submit_btn">上传</span>
                        <span class="btn btn-danger cancelup">取消</span>
                    </div>
                </form>
            </div>
            <div class="chooseBook_bottom">
                <div class="chooseBook_bottom_main">
                    <div class="intro intro1">
                        “我想看Open her，但是看很辛苦怎么办？”<br>
                        “去背单词啊” “去学英语啊”<br><br>
                        我不知道你看到这样的回答会不会满意，反正我是不会。<br><br>
                        看懂一本书，有时候就像要进一趟20km之外的城，解决方案其实会很多，最贴近人心的大概就是廉价的Uber或者建立公交体系。<br><br>
                        而学英语背单词，就像要求每个要进城的人先买车＋学车，在这个场景下，它是个符合逻辑，却格局很小的解决方案。它忽视提问的人当下的愿望，否定可能性，拒绝创新，特别是这句话还是英语教育者提出的话，它是提出者站在自己安全区内里给的Solution。<br><br>
                        So here we are: Forest Reader<br><br>
                        这是个帮助看原版书吃力的人，能够更顺畅看书的工具。<br>
                        将来还有一个帮助愿意看原版书的人，找到值得看的书的社群。
                        它是个从人的生活，社会环境系统角度提供的解决方案。<br>
                        对于读书人而言，它是个更近，更像公交，为解决问题而设计的体系。<br>
                        它可以与教育有关，可以与教育无关。<br>
                        它真正关心的，是那群人，是如何帮他们更快更好的得到他们想要的。<br><br>
                        当前的版本，仅仅提供了更快的中文意思呈现，词汇量的统计，带有最重要生词预测功能的生词本。<br>
                        之后的发展，应该着重考虑对Top down阅读策略的支持。<br><br>
                    </div>
                    <div class="intro_split_line">————————</div>
                    <div class="intro intro2">
                        关于设计的理念<br><br>
                        设计，是寻找问题的解决方案。<br>
                        一个问题提出的那一刻，从来都包含着远超字面的信息量。<br><br>
                        产品的设计者最核心的能力，不是用自己过去的经验给出最“合理”的解决方案 － 这是上一辈没有学过教育的家长干的事情。<br><br>
                        它应该空杯的凝听，谦卑的接纳自己的无知，然后充满好奇的对问题进行各种各种的理解，分析，感知。<br><br>
                        需要停止马上给出方案的思维定势，问题出现，自己的预设是不知道答案，也不着急寻找解决方案，只是想要关注问题，关注提出问题的人，关注问题和人的系统与环境，这是爱。<br><br>
                        会这样一些技巧：<br>
                        研究问题提出者，以及问题本身的所有信息，比如当前这个问题，为什么要看Open Her，他的英文水平如何，原来读书的习惯是怎样的，第二语言阅读是怎样的，好的纸质书和电子书，各种影响阅读的因素。<br><br>
                        静默，在听他说的时候，在使用各种看书的工具看书的时候，在看各种版本的这本书的时候，让判断停下来，去感知对方，感知自己，别用逻辑的判断让自己的感觉被掩盖。<br><br>
                        相信自己，因为这些都是指向一个方向的信息，一定会形成许多Pattern和洞见，而感知提供了最终设计方案的方向。当信息足够多的时候，设计的结果是生成出来的。<br><br>
                        这种设计结果的生成速度会很快，远比使用对错判断的逻辑进行建构要快，通透和准确。<br><br>
                    </div>
                    <div class="intro_split_line">————————</div>
                    <div class="intro intro3">
                        关于下一步<br><br>
                        Forest Reader<br>
                        完成原版书的辅助阅读只是第一步<br>
                        阅读的魅力，在于它比互联网更像一张网络，一本书阅读过了，就会开启其他书，以及其他事的一些可能性。<br>
                        利用人的感知，以表达为节点，社群为架构，让信息和价值的流动聚集并且加速。人们将由此获得更大的启发和动力，去更好的完成自己。<br>
                        而学习语言，只是这个完成中的一种可能性，Forest，只为引发更多的可能性。
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- vocabularyBook -->
    <section class="vocabularyBook" id="vocabularyBook">
        <div class="vocabularyBook_left_top slide">
            <img src="img/bookshelf.png" alt="To slide" class="vocabularyBook_bookshelf_btn"/>
        </div>
        <div class="vocabularyBook_main">
            <div class="vocabularyBook_tab_area">
                <div class="vocabularyBook_predict_tab vocabularyBook_tab" data-type="predict">预测生词</div>
                <div class="vocabularyBook_whole_tab vocabularyBook_tab" data-type="whole">所有生词</div>
                <hr class="vocabularyBook_hr">
            </div>

            <div class="new_words_left_arrow_area new_words_arrow_area">
                <div class="new_words_turn_page new_words_last_page">
                    <img src="img/last_page.png" alt=""/>
                </div>
            </div>
            <div class="word_list"></div>
            <div class="new_words_right_arrow_area new_words_arrow_area">
                <div class="new_words_turn_page new_words_next_page">
                    <img src="img/next_page.png" alt=""/>
                </div>
            </div>
            <div class="learning_arrow_zone">
                <span class="to_learn">
                    Learning&nbsp;<a href="http://www.baicizhan.com/" target="_blank"><img src="img/learning.png" alt=""></a>
                </span>
            </div>
        </div>
    </section>
    <!-- pageReading -->
    <section class="pageReading" id="pageReading">    
        <div class="slide">
            <div class="pageReading_slide_btn_area">
                <img src="img/bookshelf.png" alt="To slide" class="slide_btn slide_bookshelf_btn"/>
                <img src="img/catalogue.png" alt="To slide" class="slide_btn slide_catalogue_bookmark_btn"/>
            </div>
        </div>
        <div class="catalogue_bookmark_wrap">
            <div class="catalogue_bookmark_nav">
                <span class="catalogue_bookmark_btn catalogue_btn hover">目录</span>
                <span class="catalogue_bookmark_btn bookmark_btn">书签</span>
            </div>
            <div class="ct_bk">
                <div class="catalogue_area">
                    
                </div>
                <div class="bookmark_area">
                    
                </div>
            </div>
        </div>
        <div class="center_wrapper">
            <div class="arrow_area page_left_arrow_area">
                <div class="turn_page last_page">
                    <img src="img/last_page.png" alt=""/>
                </div>
            </div>
        	<div class="center">
                <div class="book_chapter_tip_zone">
                    <div class="book_tip"></div>
                    <div class="chapter_tip"></div>
                </div>
            	<div class="page_cont"></div>
                <div class="page_status">      
                    <span class="current_page_num"></span>
                    <span>/</span>
                    <span class="all_page_num"></span>
                </div>
            </div>
            <div class="arrow_area page_right_arrow_area">
                <div class="turn_page next_page">
                    <img src="img/next_page.png" alt=""/>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="word_count">0</div>
        </div>
        <div class="pageReading_option_tip">
            <div class="pageReading_option_tip_main">
                <div>
                    <span class="option_word">option</span>
                    <span>&nbsp;&nbsp;显示中文</span></div>
                <div>
                    <img src="img/pagereading_desc_left.png" alt="">
                    <span>&nbsp;&nbsp;or&nbsp;&nbsp;</span>
                    <img src="img/pagereading_desc_up.png" alt="">
                    <span>&nbsp;&nbsp;上页</span>
                </div>
                 <div>
                    <img src="img/pagereading_desc_right.png" alt="">
                    <span>&nbsp;&nbsp;or&nbsp;&nbsp;</span>
                    <img src="img/pagereading_desc_down.png" alt="">
                    <span>&nbsp;&nbsp;下页</span>
                </div>
            </div>
            <div class="pagereading_desc_circle_area">
                <img src="img/pagereading_desc_circle.png" alt="" class="pagereading_desc_circle">
            </div>
        </div>
        <div class="trans_area">
            <div class="trans_area_word"></div>
            <div class="cn_trans"></div>
            <!-- <div class='choose_button'>
                <span class='lv_btn e_a_s_y'>Easy</span>
                <span class='lv_btn h_a_r_d'>Difficult</span>
            </div> -->
        </div>
        <div class="chapter_words_area">
            <div class="chapter_words_chapter_name"></div>
            <div class="chapter_words_close">x</div>
            <div class="chapter_words_tip">Click on the words you think are simple</div>
            <div class="chapter_words_main">
                <div class="chapter_words_left_arrow_area chapter_words_arrow_area">
                    <div class="chapter_words_turn_page chapter_words_last_page">
                        <img src="img/last_page.png" alt=""/>
                    </div>
                </div>
                <div class="chapter_words_main_center"></div>
                <div class="chapter_words_right_arrow_area chapter_words_arrow_area">
                    <div class="chapter_words_turn_page chapter_words_next_page">
                        <img src="img/next_page.png" alt=""/>
                    </div>
                </div>
            </div>
            <div class="chapter_words_bottom">
                <img src="img/next_chapter_words.png" class="chapter_words_next_chapter_btn" alt="">
            </div>
        </div>
        <div class="chapter_words_status chapter_words_add_word">+1</div>
        <div class="chapter_words_status chapter_words_remove_word">-1</div>
	</section>
    
</div>
<script src="js/plugin/marked.js"></script>
<script data-main="js/main" src="js/lib/require.js"></script>
</body>
</html>